<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>清运记录</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="mb-2">
            <!-- <Button-group>
              <Button custom-icon="iconfont icon-shanchusekuai" size="small" type="error" @click="batchDel">
                删除
              </Button>
            </Button-group> -->
          </div>
          <div class="normal-list-page-bd">
            <Table border
                   :loading="list.loading"
                   :columns="list.columns"
                   :data="list.tableData"
                   @on-selection-change="selectionChange">
              <template slot-scope="{ row }"
                        slot="weight">
                <span>{{ row.weight/1000 }}kg </span>
              </template>
              <template slot-scope="{ row }"
                        slot="governmentId">
                <div>
                  <span v-if="!row.governmentId">空</span>
                  <Button v-else
                          type="primary"
                          style="margin-right: 5px"
                          @click="showModal(row)">查看考评结果</Button>
                </div>
              </template>
              <template slot-scope="{ row }"
                        slot="wuyeId">
                <div>
                  <span v-if="!row.wuyeId">空</span>
                  <Button v-else
                          type="primary"
                          style="margin-right: 5px"
                          @click="showModal(row,'wuye')">查看考评结果</Button>
                </div>
              </template>
            </Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryData.totalRecord"
                  :page-size="queryData.pageSize"
                  :current="queryData.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
        </div>
      </div>
      <Modal v-model="modal.government.isShow"
             :loading="modal.government.loading"
             :mask-closable="false"
             :title="modal.government.title"
             :footer-hide='true'
             @on-ok="postData">
        <Form ref="systemFrom"
              :model="modal.government.formData"
              :rules="modal.government.rules"
              :label-width="120">
          <FormItem label="政府id">
            <Input disabled
                   v-model="modal.government.formData.governmentId"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="分数">
            <Input disabled
                   v-model="modal.government.formData.governmentScore"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="政府名称">
            <Input disabled
                   v-model="modal.government.formData.governmentName"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="政府考评时间">
            <Input disabled
                   v-model="modal.government.formData.governmentTime"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="考评图片"
                    prop="sendParam">
            <div v-if="modal.government.formData.governmentUrls.length"
                 style="display:flex;width:300px">
              <img v-for="img in modal.government.formData.governmentUrls"
                   :src="img"
                   :key="img"
                   @click="showBigPic(img)"
                   alt=""
                   style="width:80px;margin:0 10px 10px 10px">
            </div>
          </FormItem>
        </Form>
      </Modal>
      <Modal v-model="modal.wuye.isShow"
             :loading="modal.wuye.loading"
             :mask-closable="false"
             :footer-hide='true'
             :title="modal.wuye.title"
             @on-ok="postData">
        <Form ref="systemFrom"
              :model="modal.wuye.formData"
              :rules="modal.wuye.rules"
              :label-width="120">
          <FormItem label="物业id">
            <Input disabled
                   v-model="modal.wuye.formData.wuyeId"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="分数">
            <Input disabled
                   v-model="modal.wuye.formData.wuyeScore"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="物业名称">
            <Input disabled
                   v-model="modal.wuye.formData.wuyeName"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="物业考评时间">
            <Input disabled
                   v-model="modal.wuye.formData.wuyeTime"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="考评图片"
                    prop="sendParam">
            <div v-if="modal.wuye.formData.wuyeUrls.length"
                 style="display:flex;width:300px">
              <img v-for="img in modal.wuye.formData.wuyeUrls"
                   :src="img"
                   :key="img"
                     @click="showBigPic(img)"
                   alt=""
                   style="width:80px;margin:0 10px 10px 10px">
            </div>
          </FormItem>
        </Form>
      </Modal>
      <Modal v-model="modal.img.isShow" width="800px">
          <img
            :src="modal.img.url"
            style="width: auto; height: 500px; display: block; margin: 0 auto"
          />
          <div slot="footer" />
        </Modal>
    </div>
  </div>
</template>
<script>
import ClearApi from '@/api/zhcg/clear.js'
import { Message } from 'iview'
export default {
  name: 'Clear',
  data () {
    return {
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 50,
          //   align: 'center'
          // },
          /** 开始自动生成 */
          { title: 'id', key: 'id', align: 'center', width: '100px' },
          {
            title: '清运人员',
            key: 'insertName',
            align: 'center',
            width: '100px'
          },
          {
            title: '清运地址',
            key: 'address',
            align: 'center',
            width: '350px'
          },
          {
            title: '垃圾类型',
            key: 'garbageType',
            align: 'center',
            width: '130px'
          },
          {
            title: '重量',
            key: 'weight',
            align: 'center',
            width: '230px',
            slot: 'weight'
          },
          {
            title: '政府考评',
            key: 'governmentId',
            align: 'center',
            slot: 'governmentId'
          },
          {
            title: '物业考评',
            key: 'wuyeId',
            align: 'center',
            slot: 'wuyeId'
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      },
      // 政府考评
      modal: {
        government: {
          id: '',
          isShow: false,
          bigPicVisible: false,
          loading: true,
          bigPicUrl: '',
          type: 'create', // create 新建，update 修改
          title: '政府考评结果',
          formData: {
            governmentUrls: []
          }
        },
        wuye: {
          id: '',
          isShow: false,
          bigPicVisible: false,
          loading: true,
          bigPicUrl: '',
          type: 'create', // create 新建，update 修改
          title: '物业考评结果',
          formData: {
            wuyeUrls: []
          }
        },
        img: {
          isShow: false,
          url: ''
        }
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      ClearApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },

    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          MallBillApi.del({
            ids: ids
          }).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach((element) => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },
    // 查询
    inQuire () {
      const that = this
      that.getTableData()
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },
    // 考评详情
    showModal (row, type) {
      if (type === 'wuye') {
        this.modal.wuye.type = 'wuye'
        this.modal.wuye.title = '物业考评结果'
        // 不请求后端，直接list取对象
        // this.modal.mallAdvertising.formData = JSON.parse(
        //   JSON.stringify(this.list.tableData)
        // )[index];
        ClearApi.getWuye(row.id)
          .then((res) => {
            this.modal.wuye.formData = res.data
            this.modal.wuye.isShow = true
          })
          .catch((error) => {
            Message.error(error)
          })
      } else {
        this.modal.government.type = 'government'
        this.modal.government.title = '政府考评结果'
        // 不请求后端，直接list取对象
        // this.modal.mallAdvertising.formData = JSON.parse(
        //   JSON.stringify(this.list.tableData)
        // )[index];
        ClearApi.getGovernment(row.id)
          .then((res) => {
            this.modal.government.formData = res.data
            this.modal.government.isShow = true
          })
          .catch((error) => {
            Message.error(error)
          })
      }
    },
    showBigPic (item) {
      this.modal.img.isShow = true
      this.modal.img.url = item
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
